<template>
	<view>
		<uni-notice-bar showIcon="true" scrollable="true" single="true" :text="noticeText"></uni-notice-bar>
		<uni-card title="价格公开" extra="" isShadow note="">
			<div class="Grid">
				常日价格：
			</div>
			<div class="Grid">
				节假日价格：
			</div>
		</uni-card>

		<uni-section :title="selectData" type="line">
			<view @click="changeVisibleState" style="margin-right: 20rpx;">{{visible?"收起 ":"展开 "}}</view>
		</uni-section>
		<picker-view v-show="visible" :indicator-style="indicatorStyle" :value="value" @change="changCheckData" indicator-class="picker-view">
			<picker-view-column>
				<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
			</picker-view-column>
		</picker-view>

		<view v-if="checkSuccess">
			<uni-card title="" extra="" isShadow note="" style="margin-top: 20rpx;">
				<view v-for="(item,index) in checkRes" :key="index">{{item.name}}: 余 {{item.num}}</view>
			</uni-card>

			<uni-section title="立即预约" type="line"></uni-section>
			<uni-card title="" extra="" isShadow note="" style="margin-top: 20rpx;">
				<div class="form">
					<div class="form-item-left">联系人*</div>
					<input placeholder="" v-model="userName" style="flex: 8.5;margin-top: 20rpx;margin-left: 50rpx;" />
				</div>
				<div class="form">
					<div class="form-item-left">联系电话*</div>
					<input placeholder="点击获取验证码" v-model="userPhone" class="form-item-middle" style="margin-left: 60rpx;" />
					<button class="mini-btn form-item-right" type="primary" size="mini" @click="getVerifyCode" :disabled="getVerifyCodeBtnState">{{getCodeText}}</button>
				</div>
				<div class="form">
					<div class="form-item-left">地点*</div>
					<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray"
					 class="form-item-middle">
						<view class="uni-input">{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}</view>
					</picker>
				</div>

				<div class="form">
					<div class="form-item-left">具体地点*</div>
					<input placeholder="输入具体地址" v-model="userAddr" class="form-item-middle" />
				</div>


				<div class="form">
					<div class="form-item-left">事由</div>
					<radio-group @change="radioChange" style="flex: 8.5;margin-bottom: 10rpx;">
						<label v-for="(item, index) in ForEvents" :key="item.value">
							<radio :value="item.value" :checked="index === current" style="flex;margin-top: 20rpx; margin-left: 20rpx;" /><text
							 style="flex;margin-top: 20rpx;">{{item.name}}</text>
						</label>
					</radio-group>
				</div>

				<uni-card title="预约内容" :extra="generatePrice" isShadow note="">
					<div class="Grid">
						<view>
							<radio :checked="r1Checked" @click="r1CheckedClick" /><text>service1/间</text></view>
						<uni-number-box :min="0" :max="9" :value="5" />
					</div>
					<div class="Grid">
						<view>
							<radio :checked="r2Checked" @click="r2CheckedClick" /><text>service2/间</text></view>
						<uni-number-box :min="0" :max="9" :value="4" />
					</div>
					<div class="Grid">
						<view>
							<radio :checked="r3Checked" @click="r3CheckedClick" /><text>service3/桌</text></view>
						<uni-number-box :min="0" :max="99" :value="9" />
					</div>
					<div class="Grid">
						<view>
							<radio :checked="r4Checked" @click="r4CheckedClick" /><text>service4</text></view>
					</div>

					{{generatePrice}}

				</uni-card>


				<view class="button-sp-area">
					<button type="primary" @click="preorderNow">立即预约</button>
				</view>
			</uni-card>
		</view>


	</view>
</template>
<script>
	import {
		checkWork
	} from '@/api/check.js';





	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()

			for (let i = year; i <= year + 3; i++) {
				years.push(i)
			}

			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}

			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				noticeText: "相遇在人海，聚散在重逢之外",
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1, day - 1],
				/**
				 * 解决动态设置indicator-style不生效的问题
				 */
				visible: true,
				indicatorStyle: `height: 75rpx;`,
				selectData: "日期：" + year + "年" + month + "月" + day + "日",
				checkSuccess: true,
				checkRes: [],
				multiArray: [
					['苏州市'],
					['相城区', '姑苏区', '常熟市', '昆山市', '其他'],
					['渭塘镇', '北桥街道', '太平街道', '元和街道', '阳澄湖镇', '漕湖街道', '黄桥街道', '北河泾街道', '澄阳街道', '黄埭镇', '望亭镇']
				],
				multiIndex: [0, 0, 0],
				userName: '',
				userPhone: '',
				userAddr: '',
				getCodeText: '获取',
				getVerifyCodeBtnState: false,
				ForEvents: [{
						index: 1,
						value: 'USA',
						name: '1'
					},
					{
						index: 2,
						value: 'CHN',
						name: '2',
					},
					{
						index: 3,
						value: 'BRA',
						name: '3'
					},
				],
				current: 0,
				generatePrice: '此处为计算生成的价格',
				r1Checked: false,
				r2Checked: false,
				r3Checked: false,
				r4Checked: false
			}
		},
		methods: {
			r1CheckedClick() {
				this.r1Checked != this.r1Checked
			},
			r2CheckedClick() {
				this.r2Checked != this.r2Checked
			},
			r3CheckedClick() {
				this.r3Checked != this.r3Checked
			},
			r4CheckedClick() {
				this.r4Checked != this.r4Checked

			},
			preorderNow() {
				console.log('提交')
			},
			radioChange(evt) {
				for (let i = 0; i < this.ForEvents.length; i++) {
					if (this.ForEvents[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
				console.log(this.current)
			},
			getVerifyCode(e) {
				console.log(e)
				// this.getVerifyCodeBtnState = ! this.getVerifyCodeBtnState;
				// console.log(this.getVerifyCodeBtnState)
				this.getVerifyCodeBtnState = true;
				clearInterval(this.timer)
				var waitTime = 60;
				this.timer = setInterval(() => {
					this.getCodeText = waitTime + 's'
					waitTime--
					if (waitTime === 0) {
						this.getVerifyCodeBtnState = false
						this.getCodeText = '获取'
						clearInterval(this.timer)
					}
				}, 1000)
			},

			bindMultiPickerColumnChange: function(e) {
				console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
				this.multiIndex[e.detail.column] = e.detail.value
				switch (e.detail.column) {
					case 1: //拖动第2列
						switch (this.multiIndex[1]) { //判断第2列是什么
							//把第3列的选择设置为0
							case 0:
								this.multiArray[2] = ['渭塘镇', '北桥街道', '太平街道', '元和街道', '阳澄湖镇', '漕湖街道', '黄桥街道', '北河泾街道', '澄阳街道', '黄埭镇', '望亭镇']
								break
							case 1:
								this.multiArray[2] = ['平江街道', '苏锦街道']
								break
							case 2:
								this.multiArray[2] = ['尚湖镇', '辛庄镇']
								break
							case 3:
								this.multiArray[2] = ['巴城镇']
								break
							case 4:
								this.multiArray[2] = ['其他']
								break
						}
						// this.multiIndex.splice(2, 1, 0)
						break
				}
				this.$forceUpdate()
			},
			changeVisibleState(e) {
				console.log('changeVisibleState')
				this.visible = !this.visible;
			},
			changCheckData(e) {
				const val = e.detail.value
				console.log(val)
				
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day  = this.days[val[2]]
				
				
				
				
				this.selectData = "日期：" + this.year + "年" + this.month + "月" + this.day + "日"

				let obj = {
					year: this.year,
					month: this.month,
					day: this.day
				}
				uni.showLoading({
					title: '查询中'
				})
				/*
				checkWork(obj).then(res=>{
					console.log(res)
					uni.hideLoading()
				}).catch(err=>{
					console.log(err)
					uni.hideLoading()
				})*/
				setTimeout(() => {
					//模拟请求
					uni.hideLoading()
					this.checkRes = [{
						name: 'service1',
						num: Math.round(Math.random() * 10)

					}, {
						name: 'service2',
						num: Math.round(Math.random() * 10)
					}]

				}, 500)



			}
		}
	}
</script>

<style>
	/* 	page {
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			background-color: #efeff4;
			min-height: 100%;
			height: auto;
		} */

	picker-view {
		width: 100%;
		height: 25vw;
		margin-top: 10rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}


	.Grid {
		display: flex;
		justify-content: space-between;

	}

	.Grid-cell {
		flex: 1;
		margin: 5rpx 35rpx;

	}

	.form {
		display: flex;
		justify-content: space-between;
		border-bottom: 0.5px #e9e9e9 solid;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.form-item-left {
		flex: 4;
		margin-top: 20rpx;
	}

	.form-item-middle {
		flex: 7;
		margin-top: 20rpx;
	}

	.form-item-right {
		flex: 1.5;
		margin-top: 5rpx;
		margin-bottom: 5rpx;
	}

	button {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.button-sp-area {
		margin: 0 auto;
		width: 80%;
	}
</style>
